<?php

$height = 0;
$width = 960;			// vertical spacing height between each line on the grid in pixels
$min_width = 800;

$baseline = 18;
$borderColour = '#000000';
$borderSize = 1;

define( 'DAYS_TO_CACHE', 14 );	// cache this css page for a fortnight
define( 'CSS_PRECISION', 4 );	// after the decimal point, trim to

//define( 'PHI', 0.5 * (1 + sqrt(5)) );	//1.61803399
define( 'PHI', 1.61803399 );

// CONFIGURE FROM GET VARIABLES
if (isset($_GET['width']))  	if ( is_numeric($_GET['width']) ) $width = $_GET['width'];
if (isset($_GET['height'])) 	if ( is_numeric($_GET['height']) ) $height = $_GET['height'];
if (isset($_GET['baseline'])) 	if ( is_numeric($_GET['baseline']) ) $baseline = round( $_GET['baseline'], CSS_PRECISION );

// Configure to PRINT ie. @media print
if ( isset($_GET[ 'print' ])&&!!$_GET[ 'print' ] )
{
  $min_width = $width = 480;
}

$halfBaseline = round( $baseline * 0.5, CSS_PRECISION );

// OK, as this is a layout, we need some grids. As we flip flop between fixed and flexible,
// We ideally need to create a horizontal baseline in terms of percentages of the fixed container.
//
//
//$verticalRythmn 	= $baseline;
$horizontalRythmn 	= (0.1  *  $width/$baseline)/2;

// ADD CSS HEADER
header('Content-type: text/css');
header('Expires: '.gmdate('D, d M Y H:i:s',time() + (60 * 60 * 24 * DAYS_TO_CACHE)).' GMT');	// set an expiration date

// BEGIN CSS :
?>

/* ====[ MAIN LAYOUT ]==== */
html{
        height: 100%;	
        
}

body {
        min-height:100%;
        height: 100%;
		background:transparent url(http://griddle.it/<?php echo $width; ?>-12-0?color=FFFFFF&num=false&background=white&horizontal=<?php echo $baseline; ?>) repeat scroll center top;
}
audio[controls], canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}


img {
border: 0;
-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* ====[ COLOURS ]==== */
.bg_white{	background-color:#fff; 	}
.bg_grey{	background-color:#aaa; 	}
/* ====[ LAYOUTS ]==== */

.centred{
        margin: 0 auto;
}

.margins{
        margin:<?php echo $baseline; ?>px;
}

/* == HEIGHTS == */

/* == WIDTHS == */
.fluid_full_width{
        clear:both;
        width:100%;
}

.fixed_width{
        width:<?php echo $width; ?>px;
}

.flexible_width{
        min-width: <?php echo $min_width; ?>px;
        max-width: <?php echo $width; ?>px;
}

/* ====[ ROWS ]==== */

.row_golden_large{
        height:<?php echo round(  $width*PHI, CSS_PRECISION ); ?>px;
}
.row_golden_small{
        height:<?php echo round( $width/PHI, CSS_PRECISION ); ?>px;
}
.row_baseline{
        height:<?php echo $baseline; ?>px;
}
.row_baseline_by_thirteen{
        height:<?php echo $baseline*13; ?>px;
}
.row,
.row_baseline,
.row_baseline_by_two,
.row_baseline_by_thirteen,
.row_golden_large,
.row_golden_small{
	clear:both;
        display:block;
        float:left;
        position:relative;
	width:100%;
}


/* ====[ COLUMNS ]==== */

.column_golden_large{
        width:<?php echo round( $width/PHI, CSS_PRECISION )- $baseline; ?>px;
}
.column_golden_small{
        width:<?php echo round(  $width-($width/PHI), CSS_PRECISION )- $baseline; ?>px;
}

/* COLUMN : HALVES [ 2:1 ] ================================================================ */
<?php $halveWidth = 50 -$horizontalRythmn+($horizontalRythmn/2); ?>
.column_half,
.column_halves{
	width:<?php echo $halveWidth; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}

/* COLUMN : THIRDS [ 3:1 ] ================================================================ */
<?php
// As thirds etc have two gaps in every three, we need to accomodate the width accordingly
// in thirds, there are two baseline gaps in every three that we must add to the width!
$thirdWidth = (100/3)-$horizontalRythmn+($horizontalRythmn/3);
?>
.column_thirds{
	width:<?php echo $thirdWidth ; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}
.column_two_thirds{
	width:<?php echo 2*$thirdWidth+$horizontalRythmn; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}


/* COLUMN : QUARTERS [ 4:1 ] ================================================================ */
<?php $quarterWidth = 25-$horizontalRythmn+($horizontalRythmn/4); ?>
.column_quarters{
	width:<?php echo $quarterWidth; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}

/* COLUMN : QUARTERS [ 5:1 ] ================================================================ */
<?php $fifthWidth = 20-$horizontalRythmn+($horizontalRythmn/5); ?>
.column_fifths{
	width:<?php echo $fifthWidth; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}

/* COLUMN : SIXTHS [ 6:1 ] ================================================================ */
<?php $sixthWidth = 20-$horizontalRythmn+($horizontalRythmn/5); ?>
.column_sixths{
	width:<?php echo $sixthWidth; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}


/* COLUMN : EIGHTHS [ 8:1 ] ================================================================ */
<?php $eigthWidth = 100/8-$horizontalRythmn+($horizontalRythmn/8); ?>
.column_eigths{
	width:<?php echo $eigthWidth; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}


/* COLUMN : TENTHS [ 10:1 ] ================================================================ */
<?php $tenthWidth = 10-$horizontalRythmn+($horizontalRythmn/10); ?>
.column_tenths{
	width:<?php echo $tenthWidth; ?>%;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}


/* COLUMN : ELEVENTHS [ 11:1 ] ================================================================ */
.column_elevenths{
	width:<?php echo round( $width/10, CSS_PRECISION )- $baseline; ?>px;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}

/* COLUMN : TWELTHS [ 12:1 ] ================================================================ */
.column_twelths{
	width:<?php echo round( $width/10, CSS_PRECISION )- $baseline; ?>px;
	margin:0 <?php echo $horizontalRythmn; ?>% 0 0;
}

.column,
.column_golden_large,
.column_golden_small,
.column_halves,
.column_thirds,.column_two_thirds,
.column_quarters,
.column_fifths,
.column_sixths,
.column_eigths,
.column_tenths,
.column_twelfths{
        float:left;
        display:block;
        position:relative;
  /*      overflow:hidden;*/
}

.final,
.end
{
	margin:0;
	float:right;
}

/* ABSOLUTES : ======================================================================================= */
.fullscreen{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:block;
	width:100%;
	height:100%;
z-index:50;
}
.sticky-header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	display:block;
	width:100%;
	z-index:999;
}
.top-margin{
	margin-top:<?php echo 3*$baseline; ?>px;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

/* ====[ UTILITIES ]==== */
<?php 
/* ==-- Clearfix --== */ 
// Grouping items or adding them to rows ensures that they live alone
// on that vertical level
?>
.group:before, .group:after,
.row:before, .row:after 
{
    content:"";
    display:table;
}

.group:after,
.row:after
{    clear:both;	}

.group, 
.row 
{    zoom:1; /* For IE 6/7 (trigger hasLayout) */	}

<?php /* ==-- Clear Both Sides of Divs --== */ ?>
.cleared
{
	clear:both;
}

/* ====[ GLOSS ]==== */
.rounded_corners{
        -moz-border-radius: <?php echo $halfBaseline; ?>px;
        -webkit-border-radius: <?php echo $halfBaseline; ?>px;
        border-radius: <?php echo $halfBaseline; ?>px;
        /* Fix for IE 6,7 & 8 : must be absolute path? */
        behavior: url(PIE.htc);
}

/* == Queries == */
@import url("layout-mobile.css") handheld; 
@import url("layout-mobile.css") only screen and (max-device-width:480px);


/* iPad [portrait + landscape] */
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
{


}

/* iPhone 4 [portrait + landscape] */
@media only screen and (resolution:326dpi)
{
	
}

/* screen and (resolution: 163dpi) */

/* iPhone 3 [portrait + landscape] */
@media only screen and (max-device-width:480px)
{
	
}

/* iPod Touch and older [portrait + landscape] */
@media only screen and (resolution:326dpi)
{
	
}

/* End Apple Styles */
	
/* #Tablet (Portrait)
================================================== */	

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px)
{

}


/*	#Mobile (Portrait) 
================================================== */

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) 
{

}	 


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) 
{

}